<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>新闻公告</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/main.css">
	<style>
		.news_info {
			width: 90%;
			height: 110px;
			margin-left: 6%;
			margin-top: 15px;
			margin-bottom: 10px;
			background: #eceaff;
			border-radius: 4px;
			border: 1px solid #eceaff;
		}

		.news_info div {
			float: left;
		}

		.introduce {
			width: calc(100% - 115px);
			height: 110px;
			float: right;
		}

		.title {
			width: 100%;
			height: 24px;
			margin: 2px 0;
			font-weight: bold;
			letter-spacing: 5px;
			padding-left: 10px;
			font-size: 18px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.introduce_container {
			margin-top: 5px;
			font-size: 16px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			height: 50px;
			width: 100%;
			line-height: 150%;
			/*文字行高*/
		}


		.img_box {
			margin: 5px 10px 5px 5px;
			height: 100px;
			width: 100px;
		}

		.img_box>img {
			width: 100%;
			height: 110px;
			max-height: 100%;
			max-width: 100%;
		}

		.more_info {
			margin-top: 5px;
			width: 100%;
		}

		.time {
			float: left;
			font-size: 14px;
			padding-top: 8px;
			color: rgb(203, 203, 203);
		}

		.more {
			float: right;
		}
	</style>
</head>

<body>
	<div>
		<div class="contain">
			<div class="header">
				<div class="header_title">新闻公告</div>
				<a onclick="history.back()">
					<img src="image/return.png" alt="" class="return">
				</a>
			</div>
		</div>
		<div class="news_list header-after" id="vue-root">
			<div class="news_info" v-for="news in newss" :key="news.id">
				<div class="img_box" v-if="news.pic">
					<img :src="getImg(news.pic)" class="news_img">
				</div>
				<div class="introduce">
					<div class="title" v-text="news.name"></div>
					<div class="introduce_container" v-text="getText(news.intro)"></div>
					<div class="more_info">
						<span class="time" v-text="format(news.time)"></span>
						<a class="more" :href="'school_news_details.html?id='+news.id">【查看更多】</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/js/common.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				newss: [],
				schoolId: getPerson().schoolId
			},
			created: function () {
				var url = isTeacher() ? '/t' : '/s';
				axios.get(url + '/news').then(function (res) {
					this.newss = res.data;
				}.bind(this));
			},
			methods: {
				getImg: function (pic) {
					return '/static/' + this.schoolId + '/news/' + pic;
				},
				format: function (time) {
					return dayjs(time).format('YYYY-MM-DD');
				},
				getText: function (html) {
					var b = document.createElement('div');
					b.innerHTML = html;
					var a = b.innerText;
					b.remove();
					if (a && a.length > 150)
						a = a.substr(0, 150) + '...';
					return a;
				},
			}
		});

		updateUnread('news');
	</script>

</body>

</html>